<template>
    <div class = "article" >
        <el-container v-loading = "loading">
            <el-container>
            <el-main >
                <div class="form">
                    <div class = "seek">
                        <!-- <div class = "seek-wrapper">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                        <el-button  style = "margin-left:10px;" type="primary">搜索</el-button>
                        </div> -->
                        <div class = "increased">
                            <el-radio-group v-model="radio1" style="margin-right:20px;" @change = "qwe">
                            <el-radio-button label="已发布"></el-radio-button>
                            <el-radio-button label="审核中"></el-radio-button>
                            </el-radio-group>
                            <router-link to = "/editarticle">
                        <el-button style="float:right" type="primary">新增文章</el-button>
                        </router-link>
                        </div>
                    </div>
                    <template>
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        >
                        <el-table-column
                        fixed
                        prop="id"
                        label="ID"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="title"
                        label="标题"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="visitCount"
                        label="访问量"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="weight"
                        label="权重"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="releaseDate"
                        label="创建日期"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="Delete(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="soldout(scope.row)" type="text" size="small">{{state}}</el-button>
                            <!-- <el-button  type="text" size="small">推荐</el-button> -->
                        </template>
                        </el-table-column>
                    </el-table>
                    </template>
                </div>
                <div class = "paging">
                <el-pagination
                background
                @current-change="handleCurrentChange" 
                layout="prev, pager, next"
                :total="totalCount">
            </el-pagination>
                </div>
    </el-main>
    </el-container>
    </el-container>
    </div>
</template>
<script>
import transitionTime from "../../transitionTime"
export default {
    data(){
        return{
            state:'下架',
            radio1: '已发布',
            // 默认显示第几页
           totalCount:10,
           currentPage:1,
        //    loading
           loading:false,
        tableData: [],
        // 搜索
        //  input: '',
        //  弹出框
         form: {
          name: '',
          region: '',
          textarea: '',
        },
        imageUrl: ''
        }
    },
    created(){
        this.List()
    },
    methods:{
        //获取初始化数据
        List(){
            this.loading = true
            if(this.$route.query.radio1){
            this.radio1 = this.$route.query.radio1
            } else if(this.$route.query.compile) {
            this.radio1 = this.$route.query.compile
            }
            if(this.radio1 === '已发布'){
             this.state = '下架'
             this.$api.information.informationList(this.currentPage,10).then(res => {
                this.tableData = res.data.rows
                this.transition(res)
                if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
                } else {
                    this.totalCount = 10
                }
                this.loading = false
            }).catch(err => {
                console.log(err)
            })   
            } else {
                this.state = '上架'
                this.inreview()
            }
        },
        //日期转换模块
        transition(res){
            for(let i = 0; i<res.data.rows.length; i++){
                if(res.data.rows[i].releaseDate){
                 let time =  transitionTime(res.data.rows[i].releaseDate)
                 this.tableData[i].releaseDate = time   
                }
            }
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        handleClick(item){
            this.$router.push({path:`/editarticle?compile=${this.radio1}`,query:{form:item.id}})
        },
        //删除
        Delete(item){
             this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            this.loading = true
            this.$api.information.informationdelete(item.id).then(res => {
                if(res.code === 200){
                   this.tableData = this.tableData.filter(data => {
                        return data.id !== item.id
                    })
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                this.loading = false
                } else {
                    
                }
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });  
            });
        },
        //审核中
        inreview(){
            this.$api.information.informationunderreview(this.currentPage,10).then(res => {
                    this.tableData = res.data.rows
                    this.transition(res)
                    if(res.data.pageCount){
                        this.totalCount = res.data.pageCount * 10
                    } else {
                        this.totalCount = 10
                    }
                    this.loading = false
            })
        },
        //判断已发布于，已审核
        qwe(item,index){
            if(item === '审核中'){
                this.loading = true
                this.currentPage = 1
                this.totalCount = 10
                this.state = '上架'
                this.inreview()
            } else {
                this.loading = true
                this.currentPage = 1
                this.totalCount = 10
                this.state = '下架'
                this.$api.information.informationList(this.currentPage,10).then(res => {
                this.tableData = res.data.rows
                this.transition(res)
                if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
                } else {
                    this.totalCount = 10
                }
                this.loading = false
                }).catch(err => {
                    console.log(err)
                })   
                // this.List()
            }
        },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      // 上下架
      soldout(item){
            let type = ''
            if(this.state == '上架'){
                type = 'published'
            } else {
                type = 'processing'
            }
            this.$confirm('是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.loading = true
                this.$api.information.informationsoldout(item.id,type).then(res => {
                    if(res.code === 200){
                    this.tableData = this.tableData.filter(data => {
                        return data.id !== item.id
                    })
                        this.$message({
                            type: 'success',
                            message: '成功!'
                        });
                this.loading = false
                    } else {

                    }
                }).catch(ree => {
                    console.log(err)
                })
           
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
      },
      //   分页器方法
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
           if(this.radio1 === '审核中'){
               this.loading = true
               this.inreview()
           } else {
              this.loading = true
                this.state = '下架'
             this.$api.information.informationList(this.currentPage,10).then(res => {
                this.tableData = res.data.rows
                this.transition(res)
                if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
                } else {
                    this.totalCount = 10
                }
             })
             this.loading = false
           }
       },
//     //日期转换
//      formatDateTime (date) {
//         var time = new Date(Date.parse(date));
//         time.setTime(time.setHours(time.getHours() + 8));
//         var Y = time.getFullYear() + '-';
//         var  M = this.addZero(time.getMonth() + 1) + '-';
//         var D = this.addZero(time.getDate()) + ' ';
//         var h = this.addZero(time.getHours()) + ':';
//         var m = this.addZero(time.getMinutes()) + ':';
//         var  s = this.addZero(time.getSeconds());
//         let datetime = Y + M + D
//         return datetime
//       },
//       //日期补0操作
//       addZero(num) {
//         return num < 10 ? num : num;
//       },
    }
}
</script>
<style scoped>
    .article{
        width:100%;
    }
    .article .title{
        padding-bottom:20px;
    }
    .article .form .seek{
        width:100%;
        margin-bottom: 10px;
        height:40px;
    }
    .article .seek-wrapper{
        display:flex;
        width: 300px;
        float: left;
    }
    .article .increased{
        /* float:right; */
    }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
   .article .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .article .paging{
      float:right;
      padding:15px 0
  }
</style>